function myTab(tabButtonId,tabPanelId,defaultIndex,onchange){
    if(defaultIndex==null)defaultIndex=0;
    $(tabPanelId+" .pageBox").css("width",$(tabPanelId+" .pageBox").children().length+"00%");
    $(tabButtonId).on("click",".tabButton",function(e){
        var et=$(e.target);
        $(tabButtonId+" .active").removeClass("active");
        et.addClass("active");
        $(tabButtonId+" .tabBar").css("width","40px");
        $(tabButtonId+" .tabBar").css("left",(et[0].offsetLeft+et.width()/2-20)+"px");
        setTimeout(function () {
            $(tabButtonId+" .tabBar").css("width","80px");
            $(tabButtonId+" .tabBar").css("left",(et[0].offsetLeft+et.width()/2-40)+"px");
        },500)
        $(tabPanelId+" .pageBox").css("left","-"+et.index()+"00%");


        $(tabPanelId+" .page").css("height",$(".tabPageBox").height());
        $(tabPanelId+" .page").eq(et.index()).css("height","auto");
        if(onchange!=null){
            onchange(et.index());
        }
    })
    $(tabButtonId+" .tabButton").eq(defaultIndex).addClass("active");
    $(tabPanelId+" .page").css("height",$(".tabPageBox").height());
    $(tabPanelId+" .page").eq(defaultIndex).css("height","auto");
    var et=$(tabButtonId+" .tabButton").eq(defaultIndex);
    $(tabButtonId+" .tabBar").css("width","80px");
    $(tabButtonId+" .tabBar").css("left",(et[0].offsetLeft+et.width()/2-40)+"px");
    $(tabPanelId+" .pageBox").css("left","-"+et.index()+"00%");
}